<template>
    <div class="container job-container">
        <system-nav name="公开党课">
            <template #addBtn>
                <p> 
                    <Button type="primary" @click="addClass">录入公开党课</Button>
                </p>
            </template>
        </system-nav> 

        <div class="inner mt-inner">
            <div>
                <div class="tool-bar">
                    <Form class="search-bar" ref="searchForm" :model="searchForm" :label-width="75" :inline="true">
                        <FormItem label="党课："> 
                            <!-- <div style="width:150px;">
                                <member-tree v-model="searchForm.userIds" />
                            </div> -->
                            <Select class="common-input search-input " style="width:100px;" v-model="searchForm.userIds"    placeholder="请选择党课">
                                <Option v-for="item in userList" :value="item.id" :key="item.id">{{ item.deptName }}</Option>
                            </Select>
                        </FormItem>
                        <FormItem label="标题："> 
                            <Input class="search-input short-input" type="text" v-model="searchForm.params" clearable 
                                @on-clear="handleSearch" @keydown.enter.native.prevent="handleSearch" placeholder="请输入关键字">
                            </Input> 
                        </FormItem>
                        <FormItem label="时间："> 
                            <DatePicker v-model="searchForm.startTime" type="datetime" class="short-input" @on-change="getStartTime"></DatePicker> 至
                            <DatePicker v-model="searchForm.endTime" type="datetime" class="short-input" @on-change="getEndTime"></DatePicker>
                        </FormItem>
                        <Button class="search-btn" type="primary" @click="handleSearch">查询</Button>
                    </Form>    
                </div>
                <div class="class-list">
                    <ul>
                        <li class="class-item" v-for="(item,index) in mtList" :key="index">
                            <div>
                                <p class="class-item-date">{{item.createTime | formatDate}}</p>
                                <div class="class-item-box"  @click="mtDetail(item)"></div>
                                <p class="class-item-title">
                                    <span  @click="mtDetail(item)">{{ item.title }}</span>
                                    <span v-if='item.status==1 && item.sendUserId==userId'><Button type="text" size="small" @click="classEdit(item)" style='color: #4171B9;'>修改</Button></span>
                                    <span><Button type="text" size="small" @click="classRemove(item)">删除</Button></span>
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div style="margin: 10px;overflow: hidden;text-align:center">
                    <div style="display:inline-block;">
                        <Page :total="page.total" :current="page.current" :page-size="page.pageSize" :page-size-opts="pageSizeOpts"
                            show-total show-elevator show-sizer
                            @on-change="changePage" @on-page-size-change="changePageSize">
                        </Page>
                    </div>
                </div>
            </div>
            <div class="noData" v-if="mtList.length<1">
                当前组织没有录入党课！
            </div>
        </div>    
    </div>
</template>
<script>
import { getUserListNoselfRest,classList,classDel } from '@/common/apis/system'
import SystemNav from '@/components/SystemNav'
import mixin from '@/mixins'
import MemberTree from '@/components/MemberTree'

export default {
    name: 'classlist',
    data(){
        return{
            searchForm: {
                userIds:[],
                params: '',
                startTime:'',
                endTime:''
            },
           
            mtList:[],
            pageSizeOpts:[10,20,30],
            page:{
                total:0,
                current:1,
                pageSize:10,
            },
            userList:'',
            userId:''
        }
    },
    mixins: [mixin],
    components:{SystemNav,MemberTree},
    mounted(){
        let params = {
            level:1
        }
        this.getMt(params)
        this.getUserListNoself()
        this.userId = JSON.parse(localStorage.getItem('dangjianUserInfo')).userId
    },
    methods:{
        classEdit(item){
            console.log(item)
            this.$router.push({
                path: "/addClass",
                query: {         //参数携带方式
                id: item.id
                }
            });
        },
        getUserListNoself() {
            getUserListNoselfRest().then(result =>{
                this.userList = result.data.content
            })
        },
         handleSearch() {
            let params = {
                level:1,
                pageNo:1,
                pageSize:this.page.pageSize,
                params:this.searchForm.params,
                startTime:this.searchForm.startTime?moment(this.searchForm.startTime).format('YYYY-MM-DD HH:mm:ss') : '',
                endTime:this.searchForm.endTime?moment(this.searchForm).format('YYYY-MM-DD HH:mm:ss').endTime : '',
            }
            this.getMt(params)
        },
        getMt(data){
            let params = {
                level:1,
                pageNo:data.pageNo?data.pageNo:this.page.current,
                pageSize:data.pageSize?data.pageSize:this.page.pageSize,
                params:data.params?data.params:'',
                startTime:data.startTime?data.startTime: '',
                endTime:data.endTime?data.endTime : '',
            }
            classList(params).then(result =>{
                console.log(result)
                this.mtList = result.data.content.list
                this.page.total = result.data.content.total

            })
        },
        changePage(val){
            let params = {
                level:3,
                pageNo:val,
                pageSize:this.page.pageSize,
                params:this.searchForm.params,
                startTime:this.searchForm.startTime?this.searchForm.startTime : '',
                endTime:this.searchForm.endTime?this.searchForm.endTime : '',
            }
            this.getMt(params)
        },
        changePageSize(val){
            this.page.pageSize = val
            let params = {
                level:3,
                pageNo:this.page.current,
                pageSize:val,
                params:this.searchForm.params,
                startTime:this.searchForm.startTime?this.searchForm.startTime: '',
                endTime:this.searchForm.endTime?this.searchForm.endTime : '',
            }
            this.getMt(params)
        },
        classRemove(row){
            let _this = this
            this.$Modal.confirm({
                title: '提示',
                content: '您确定要删除此党课？',
                onOk: () => {
                    classDel(row.id).then(result => {
                        if (result.status === 200) {
                            _this.$Message.success('删除成功');
                            let params = {
                                level:1
                            }
                            _this.getMt(params)
                        }
                    })
                },
                onCancel: () => {}
            })
        },
        mtDetail(row){
           this.$router.push({path: '/wtClass', query: {id: row.id}})
        },
        getStartTime(val){
            this.searchForm.startTime = val;
        },
        getEndTime(val){
            this.searchForm.endTime = val;
        },
        addClass(){
           this.$router.push('/addClass')
        }
    }
}
</script>
<style lang="less" scoped>
    .noData{
        font-size: 28px;
        text-align: center;
        padding: 50px 0;
        font-weight:200;
    }
    .class-list{
        ul{
            li{
                display: inline-block;
                width: 20%;
                margin-bottom: 10px;
                &>div{
                    width:91%;
                }
                .class-item-date{
                    color: #f00;
                    font-size: 14px;
                    margin-bottom: 3px;
                }
                .class-item-box{
                    height:200px;
                    border-radius: 5px;
                    /* border:1px solid #ccc; */
                    /* background:url('../../assets/images/noImg.png') no-repeat; */
                    /* background-size: 44%; */
                    /* background-position: 48px 70px; */
                    background: url('../../assets/images/video_bg.png') no-repeat center;
                    background-size: cover;
                }
                .class-item-oper{
                    text-align: right;
                }
                .class-item-title{
                    font-size: 14px;
                    margin-top: 3px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    &>span:first-child{
                        width:80%;
                        display:inline-block;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                    }
                    &>span:last-child{
                        button{
                        color: #4171B9;
                        }
                    }
                }
            }
        }
    }
</style>